/** Banner页首 */
const {
    headerStore,
} = require('./store/dataStore.js')
const Header = {
    data() {
        return {
            tip: true
        }
    },
    computed: {
        notifyData() {
            return this.$store.state.notifyData
        },
        update() {
            return this.$store.state.update
        }
    },
    watch:{
        update(){
            let that = this
            this.$notify({
                title: '您的消息',
                dangerouslyUseHTMLString: true,
                message: that.$store.state.notifyData
            })
        }
    },
    template: `
        <header class="homeHeader">
            <div class="homeHeader-service">
                <a href="tencent://message/?uin=2101194740&Site=&menu=yes"><img src="./tuiguangma/assets/imgs/service.png"/></a>
            </div>
            <div class="homeHeader-logo">
                <img v-show="!textTitle" src="./tuiguangma/assets/imgs/logo.png"/>
                <h3 v-show="textTitle" v-text="textTitle"></h3>
            </div>
            <div :class="tip ? 'homeHeader-info tip' : 'homeHeader-info'" @click="getNotify">
                <img src="./tuiguangma/assets/imgs/info.png"/>
            </div>
        </header>
    `,
    methods: {
        getNotify(){
            this.$data.tip = false
            this.$store.dispatch('getNotify')
        }
    },
    props: {
        textTitle: String
    },
    store: headerStore
}

/** 底部导航 */
const BottomNav = {
    template: `
        <nav class="bottomNav">
            <router-link to="/Home" class="bottomNav-item" v-bind:class="{active:activeItem==1}">
                <img src="./tuiguangma/assets/imgs/icon1.png" v-show="activeItem!=1"/>
                <img src="./tuiguangma/assets/imgs/icon11.png"  v-show="activeItem==1"/>
                <h4>首页</h4>
            </router-link>
            <router-link to="/info" class="bottomNav-item" v-bind:class="{active:activeItem==2}">
                <img src="./tuiguangma/assets/imgs/icon2.png" v-show="activeItem!=2"/>
                <img src="./tuiguangma/assets/imgs/icon22.png"  v-show="activeItem==2"/>
                <h4>素材库</h4>
            </router-link>
            <router-link to="/result" class="bottomNav-item" v-bind:class="{active:activeItem==3}">
                <img src="./tuiguangma/assets/imgs/icon3.png"  v-show="activeItem!=3"/>
                <img src="./tuiguangma/assets/imgs/icon33.png"  v-show="activeItem==3"/>
                <h4>效果</h4>
            </router-link>
            <router-link to="/self" class="bottomNav-item" v-bind:class="{active:activeItem==4}">
                <img src="./tuiguangma/assets/imgs/icon4.png"  v-show="activeItem!=4"/>
                <img src="./tuiguangma/assets/imgs/icon44.png"  v-show="activeItem==4"/>
                <h4>我的</h4>
            </router-link>
        </nav>
    `,
    props: {
        activeItem: String
    }
}

/**首页内容 */
const HomePage = {
    data() {
        return {
            loading: true,
            showPage: 1,
            formLabelAlign: {
                phone: '',
                checkCode: '',
                money: '',
            }
        }
    },
    computed: {
        state() {
            return this.$store.state
        },
        memberData() {
            console.log(this.$store.state.memberData)
            return this.$store.memberData
        }
    },
    mounted() {
        let id = sessionStorage.getItem('memberId')
        if (!id) {
            this.$router.push({
                path: '/'
            })
            return
        }
        const store = this.$store
        store.dispatch('getMemberInfo')
        store.dispatch('getHomeData')
        this.$data.loading = false
    },
    template: `
        <div class="homePage" v-loading="loading">
            <template v-if="showPage==1">
                <template>
                    <div class="homePage-slider block" style="height:40vw;">
                        <mt-swipe>
                            <mt-swipe-item v-for="item in state.homeData.data.slideItem">
                                <a :href="item.url ? ('http://app-tui.ngzb.com.cn'+item.url) : '#'">
                                <img style="width:100%;" :src="'http://app-tui.ngzb.com.cn'+item.image"/>
                                </a>
                            </mt-swipe-item>
                        </mt-swipe>
                    </div>
                </template>
                <div class="homePage-tixian">
                    <div class="homePage-tixian-txt">可提现金额</div>
                    <div class="homePage-tixian-number"><span>{{state.homeData.data.balance}}</span><span>元</span></div>
                    <div class="homePage-tixian-btn" @click="getmoneyPage">提&nbsp;&nbsp;现</div>
                </div>
                <div class="homePage-mingxi">
                    <div class="homePage-mingxi-header">
                        <div class="homePage-mingxi-header-l"><img src="./tuiguangma/assets/imgs/mxicon1.png"/><span>收入明细</span></div>
                        <div class="homePage-mingxi-header-r" @click="incomePage"><img src="./tuiguangma/assets/imgs/mxicon2.png"/></div>
                    </div>
                    <div class="homePage-mingxi-content">
                        <div class="homePage-mingxi-content-l">
                            <p>上月预估收入（元）</p>
                            <p>{{state.homeData.data.lastMonthMoney}}</p>
                            <p>可结算</p>
                        </div>
                        <div class="homePage-mingxi-content-r">
                            <p>本月预估收入（元）</p>
                            <p>{{state.homeData.data.monthMoney}}</p>
                            <p>下月结算</p>
                        </div>
                    </div>
                    <div class="homePage-mingxi-footer">
                        *每月10号可申请结算上月预估收入，本月预估收入则下月10日结算
                    </div>
                </div>
                <div class="homePage-tuiguang">
                    <div class="homePage-tuiguang-header">近期推广</div>
                    <table class="homePage-tuiguang-content">
                        <tr v-for="item in state.homeData.data.spreadCount">
                            <td>{{item.username ? item.username : '.....'}}</td>
                            <td>
                                <p>已打开</p>
                                <p>{{item.installTime}}</p>
                            </td>
                            <td>
                                <template v-if="item.status==2">
                                    <p style="color:#ff7229;">已被他人邀请</p>
                                </template>
                                <template v-else>
                                    <p>{{item.regTime==0 ? '未注册' : '已注册'}}</p>
                                    <p>{{item.regTime==0 ? '.....' : item.regTime}}</p>
                                </template>
                            </td>
                        </tr>
                    </table>
                    <div class="homePage-tuiguang-footer">
                        <div class="homePage-tuiguang-footer-t1" @click="detailPage">
                            <span>查看详细报表</span>
                            <img src="./tuiguangma/assets/imgs/tgicon.png"/>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="showPage==2">
                <div class="homePage-mingxi-header-l" @click="homePage"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <table class="homePage-tuiguang-content">
                    <tr v-for="item in state.incomeData.data">
                        <td>{{item.content ? item.content : '.....'}}</td>
                        <td>
                            <p>收入</p>
                            <p>{{item.money}}元</p>
                        </td>
                        <td>
                            <p>时间</p>
                            <p>{{item.create_time}}</p>
                        </td>
                    </tr>
                </table>
            </template>
            <template v-else-if="showPage==3">
                <div class="homePage-mingxi-header-l" @click="homePage"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <table class="homePage-tuiguang-content">
                    <tr v-for="item in state.detailData.data.spreadCount">
                        <td>{{item.username ? item.username : '.....'}}</td>
                        <td>
                            <p>已打开</p>
                            <p>{{item.installTime}}</p>
                        </td>
                        <td>
                            <template v-if="item.status==2">
                                <p style="color:#ff7229;">已被他人邀请</p>
                            </template>
                            <template v-else>
                                <p v-if="item.regTime==0" style="color:#999;">未注册</p>
                                <p v-else>已注册</p>
                                <p>{{item.regTime==0 ? '.....' : item.regTime}}</p>
                            </template>
                        </td>
                    </tr>
                </table>
            </template>
            <template v-else-if="showPage==4">
                <div class="homePage-mingxi-header-l" @click="homePage"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <el-form :model="formLabelAlign" class="homePage-getmoney" label-width="22vw">
                    <el-form-item label="可提现">
                        <h4>{{state.homeData.data.balance}}元</h4>
                    </el-form-item>
                    <el-form-item label="提取金额">
                        <el-input v-model="formLabelAlign.money"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input class="homePage-getmoney-phone" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="formLabelAlign.checkcode" class="homePage-getmoney-code"></el-input>
                        <el-button type="primary" @click="sendCheckCode" class="homePage-getmoney-codesend">发送验证码</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="submitGetmoney">发送提现请求</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </div>
    `,
    methods: {
        homePage() {
            this.$data.showPage = 1
        },
        incomePage() {
            this.$store.dispatch('getIncomeData')
            this.$data.showPage = 2
        },
        detailPage() {
            this.$store.dispatch('getDetailData')
            this.$data.showPage = 3
        },
        getmoneyPage() {
            let that = this
            this.$data.showPage = 4
            setTimeout(()=>{console.info(that.$store.state.memberData.data.member);$('.homePage-getmoney-phone input').attr('placeholder',that.$store.state.memberData.data.member.phone)})
        },
        submitGetmoney() {
            let that = this
            let id = sessionStorage.getItem('memberId')
            let formData = this.$data.formLabelAlign
            let fd = new FormData('sex', )
            fd.append('memberId', id)
            fd.append('code', $('.homePage-getmoney-code input').val())
            fd.append('phone', that.$store.state.memberData.data.member.phone)
            formData.money && fd.append('money', formData.money)
            $.ajax({
                url: mainhost + '/member/withdraw/index',
                dataType: 'json',
                type: 'post',
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {
                    MINT.Toast(data.msg)
                }
            })
            console.log(this.$data.formLabelAlign)
        },
        sendCheckCode() {
            const that = this
            new Promise((res, rej) => {
                let _fd = new FormData()
                _fd.append('member_id', sessionStorage.getItem('memberId'))
                _fd.append('type', 2)
                _fd.append('phone', that.$store.state.memberData.data.member.phone)
                $.ajax({
                    url: mainhost + '/member/user/mobileVerify',
                    data: _fd,
                    type: 'post',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        res(data)
                    }
                })
            }).then(data => {
                MINT.Toast(data.msg)
            })
        }
    }
}


//信息页内容
const InfoPage = {
    data() {
        return {
            topbtn: 1,
            mainhost,
            ckcontent:''
        }
    },
    computed: {
        material() {
            return this.$store.state.material
        },
        tutorial() {
            return this.$store.state.tutorial
        }
    },
    template: `
        <div class="infoPage">
            <div class="infoPage-topbtn">
                <div @click="activeClick" class="infoPage-topbtn-item" v-bind:class="{active:topbtn==1}" id="1">推广教程</div>
                <div @click="activeClick" class="infoPage-topbtn-item" v-bind:class="{active:topbtn==2}" id="2">推广素材</div>
            </div>
            <div class="infoPage-page1" v-if="topbtn==1">
                <template v-for="item in tutorial">
                    <div @click="showDetail(item.ckcontent)" v-if="!ckcontent">
                        <mt-cell :title="item.title">
                            
                        </mt-cell>
                    </div>
                </template>
                <div class="infoPage-detail" v-if="ckcontent">
                    <mt-button icon="back" @click="backDetail">返回</mt-button>
                    <div v-html="ckcontent" id="infoDetail">

                    </div>
                </div>
            </div>
            <div class="infoPage-page2" v-else-if="topbtn==2">
                <el-main class="infoPage-page2-area1">
                    <h3>文字推广模板</h3>
                    <div id="clipboard-target">
                    <p>{{material.content}}</p>
                    <p>{{material.url}}</p>
                    </div>
                    <div class="infoPage-page2-area1-copy" @click="copyevent" data-clipboard-target="#clipboard-target" id="clipboard-target-btn">复制</div>
                </el-main>
                <el-main>
                    <h3>横版推广码</h3>
                    <div class="infoPage-page2-area2">
                        <img :src="mainhost+material.horizontalQrcode"/>
                        <div class="infoPage-page2-area2btn" @touchstart="savebtn">长按保存图片</div>
                    </div>
                </el-main>
                <el-main>
                    <h3>竖版推广码</h3>
                    <div class="infoPage-page2-area3">
                        <img :src="mainhost+material.verticalQrcode"/>
                        <div class="infoPage-page2-area3btn" @touchstart="savebtn">长按保存图片</div>
                    </div>
                </el-main>
            </div>
        </div>
    `,
    beforeMount() {
        this.$store.dispatch('getTutorial')
    },
    methods: {
        showDetail(content) {
            let element = document.createElement('div')
            element.innerHTML = content
            let imgs = element.getElementsByTagName('img')
            for(let i=0;i<imgs.length;i++){
                var src = window.mainhost+imgs[i].getAttribute('src')
                imgs[i].setAttribute('src',src)
            }
            this.$data.ckcontent = element.innerHTML
        },
        backDetail(){
            this.$data.ckcontent = ''
        },
        incomePage() {
            this.$data.showPage = 2
        },
        detailPage() {
            this.$data.showPage = 3
        },
        activeClick(event) {
            switch (event.target.id) {
                case '1':
                    this.$data.topbtn = 1
                    break
                case '2':
                    this.$data.topbtn = 2
                    this.$store.dispatch('getMaterial')
                    break
            }
        },
        savebtn(e) {
            e.target.style.display = "none"
        },
        copyevent() {
            let that = this
            var clipboard = new ClipboardJS('#clipboard-target-btn')
            // 显示用户反馈/捕获复制/剪切操作后选择的内容
            clipboard.on('success', function (e) {
                MINT.Toast('复制成功！')
                console.info('Action:', e.action)//触发的动作/如：copy,cut等
                console.info('Text:', e.text);//触发的文本
                console.info('Trigger:', e.trigger);//触发的DOm元素
                e.clearSelection();//清除选中样式（蓝色）
            })
            clipboard.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        }
    }
}


//推广页内容
const ResultPage = {
    data() {
        return {
            state: this.$store.state,
            mainhost,
            showPage: 1,
            topbtn: 1,
            bottombtn: 1,
            loading: true,
            //底部按钮组数据
            openCount: null,
            registCount: null,
            incomeCount: null,
            //顶部按钮组数据
            member1: {},
            member2: {},
            member3: {},
        }
    },
    computed: {
        spread() {
            return this.$store.state.resultData.spread
        },
        star() {
            return this.$store.state.resultData.star
        },
        incomeData() {
            return this.$store.state.incomeData
        }
    },
    watch: {
        spread() {
            this.$data.openCount = this.$store.state.resultData.spread.allTodaySpread.installTimeCount
            this.$data.registCount = this.$store.state.resultData.spread.allTodaySpread.regTimeCount
            this.$data.incomeCount = this.$store.state.resultData.spread.allTodaySpread.money
        },
        star() {
            this.$data.member1 = this.$store.state.resultData.star.weekStar[0]
            this.$data.member2 = this.$store.state.resultData.star.weekStar[1]
            this.$data.member3 = this.$store.state.resultData.star.weekStar[2]
        }
    },
    mounted() {
        let id = sessionStorage.getItem('memberId')
        if (!id) {
            this.$router.push({
                path: '/'
            })
            return
        }
        const store = this.$store
        store.dispatch('getResultData')
        this.$data.loading = false
    },
    template: `
        <div class="resultPage">
            <template v-if="showPage==1">
                <div class="resultPage-rankshow">
                    <div class="resultPage-rankshow-topbtn">
                        <div id="1" @click="topbtnAction" v-bind:class="{active:topbtn==1}">本周之星</div>
                        <div id="2" @click="topbtnAction" v-bind:class="{active:topbtn==2}">本月之星</div>
                        <div id="3" @click="topbtnAction" v-bind:class="{active:topbtn==3}">全部之星</div>
                    </div>
                    <div class="resultPage-rankshow-person">
                        <div class="resultPage-rankshow-person-midarea2"></div>
                        <div class="resultPage-rankshow-person-midarea"></div>
                        
                        <div class="resultPage-rankshow-person-user">
                            <div class="resultPage-rankshow-person-user-item">
                                <img :src="member2&&(mainhost+member2.avatar)"/>
                                <h5>{{member2&&(member2.username)}}</h5>
                                <p>￥<span>{{member2&&(member2.money)}}</span></p>
                                <img src="./tuiguangma/assets/imgs/noicon1.png" class="resultPage-rankshow-person-user-item-noimg1">
                                <img src="./tuiguangma/assets/imgs/noicon11.png"  class="resultPage-rankshow-person-user-item-noimg2">
                            </div>
                            <div class="resultPage-rankshow-person-user-item">
                                <img :src="member1&&(mainhost+member1.avatar)"/>
                                <h5>{{member1&&(member1.username)}}</h5>
                                <p>￥<span>{{member1&&(member1.money)}}</span></p>
                                <img src="./tuiguangma/assets/imgs/noicon2.png" class="resultPage-rankshow-person-user-item-noimg1">
                                <img src="./tuiguangma/assets/imgs/noicon22.png"  class="resultPage-rankshow-person-user-item-noimg2">
                            </div>
                            <div class="resultPage-rankshow-person-user-item">
                                <img :src="member3&&(mainhost+member3.avatar)"/>
                                <h5>{{member3&&(member3.username)}}</h5>
                                <p>￥<span>{{member3&&(member3.money)}}</span></p>
                                <img src="./tuiguangma/assets/imgs/noicon3.png" class="resultPage-rankshow-person-user-item-noimg1">
                                <img src="./tuiguangma/assets/imgs/noicon33.png"  class="resultPage-rankshow-person-user-item-noimg2">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="homePage-mingxi">
                    <div class="homePage-mingxi-header" @click="incomePage">
                        <div class="homePage-mingxi-header-l"><img src="./tuiguangma/assets/imgs/mxicon1.png"/><span>收入明细</span></div>
                        <div class="homePage-mingxi-header-r"><img src="./tuiguangma/assets/imgs/mxicon2.png"/></div>
                    </div>
                    <div class="homePage-mingxi-content">
                        <div class="homePage-mingxi-content-l">
                            <p>上月预估收入（元）</p>
                            <p>{{state.resultData.lastMonthMoney}}</p>
                            <p>可结算</p>
                        </div>
                        <div class="homePage-mingxi-content-r">
                            <p>本月预估收入（元）</p>
                            <p>{{state.resultData.monthMoney}}</p>
                            <p>下月结算</p>
                        </div>
                    </div>
                    <div class="homePage-mingxi-footer">
                        *每月10号可申请结算上月预估收入，本月预估收入则下月10日结算
                    </div>
                </div>
                <div class="resultPage-riqi">
                    <ul class="resultPage-riqi-btn">
                        <li id="1" @click="bottombtnAction" v-bind:class="{active:bottombtn==1}">今日</li>
                        <li id="2" @click="bottombtnAction" v-bind:class="{active:bottombtn==2}">昨日</li>
                        <li id="3" @click="bottombtnAction" v-bind:class="{active:bottombtn==3}">本月</li>
                        <li id="4" @click="bottombtnAction" v-bind:class="{active:bottombtn==4}">上月</li>
                    </ul>
                    <div class="resultPage-riqi-info">
                        <div>
                            <p>打开数量</p>
                            <p><span>{{openCount}}</span>台</p>
                        </div>
                        <div>
                            <p>注册数量</p>
                            <p><span>{{registCount}}</span>台</p>
                        </div>
                        <div>
                            <p>预估收入</p>
                            <p><span>{{incomeCount}}</span>元</p>
                        </div>
                    </div>
                </div>
            </template>
            <template v-else-if="showPage==2">
                <div class="homePage-mingxi-header-l" @click="homePage"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <table class="homePage-tuiguang-content">
                    <tr v-for="item in incomeData.data">
                        <td>{{item.content ? item.content : '.....'}}</td>
                        <td>
                            <p>收入</p>
                            <p>{{item.money}}元</p>
                        </td>
                        <td>
                            <p>时间</p>
                            <p>{{item.create_time}}</p>
                        </td>
                    </tr>
                </table>
            </template>
        </div>
    `,
    methods: {
        homePage() {
            this.$data.showPage = 1
        },
        incomePage() {
            this.$store.dispatch('getIncomeData')
            this.$data.showPage = 2
        },
        topbtnAction(event) {
            let id = this.$data.topbtn = event.target.id
            switch (id) {
                case "1":
                    this.$data.member1 = this.$store.state.resultData.star.weekStar[0]
                    this.$data.member2 = this.$store.state.resultData.star.weekStar[1]
                    this.$data.member3 = this.$store.state.resultData.star.weekStar[2]
                    break
                case "2":
                    this.$data.member1 = this.$store.state.resultData.star.monthStar[0]
                    this.$data.member2 = this.$store.state.resultData.star.monthStar[1]
                    this.$data.member3 = this.$store.state.resultData.star.monthStar[2]
                    break
                case "3":
                    this.$data.member1 = this.$store.state.resultData.star.allStar[0]
                    this.$data.member2 = this.$store.state.resultData.star.allStar[1]
                    this.$data.member3 = this.$store.state.resultData.star.allStar[2]
                    break
            }
        },
        bottombtnAction(event) {
            let id = this.$data.bottombtn = event.target.id
            switch (id) {
                case "1":
                    this.$data.openCount = this.$store.state.resultData.spread.allTodaySpread.installTimeCount
                    this.$data.registCount = this.$store.state.resultData.spread.allTodaySpread.regTimeCount
                    this.$data.incomeCount = this.$store.state.resultData.spread.allTodaySpread.money
                    break
                case "2":
                    this.$data.openCount = this.$store.state.resultData.spread.allYesterdaySpread.installTimeCount
                    this.$data.registCount = this.$store.state.resultData.spread.allYesterdaySpread.regTimeCount
                    this.$data.incomeCount = this.$store.state.resultData.spread.allYesterdaySpread.money
                    break
                case "3":
                    this.$data.openCount = this.$store.state.resultData.spread.allMonthSpread.installTimeCount
                    this.$data.registCount = this.$store.state.resultData.spread.allMonthSpread.regTimeCount
                    this.$data.incomeCount = this.$store.state.resultData.spread.allMonthSpread.money
                    break
                case "4":
                    this.$data.openCount = this.$store.state.resultData.spread.allLastMonthSpread.installTimeCount
                    this.$data.registCount = this.$store.state.resultData.spread.allLastMonthSpread.regTimeCount
                    this.$data.incomeCount = this.$store.state.resultData.spread.allLastMonthSpread.money
                    break
            }
        }
    }
}


//个人中心
const SelfPage = {
    data() {
        return {
            mainhost,
            state: this.$store.state,
            showPage: 0,
            avatar: null,
            style: {
                marginStyle: {
                    marginBottom: '20px'
                },
                marginStyle2: {
                    marginTop: '30px'
                },
                buttonStyle: {
                    width: '50vw'
                }
            },
            formLabelAlign: {
                phone: '',
                avatar: '',
                checkcode: '',
                sex: ''
            },
            loading: false
        }
    },
    computed: {
        incomeData() {
            return this.$store.state.incomeData
        },
        notifyData() {
            return this.$store.state.notifyData
        }
    },
    mounted() {
        let id = sessionStorage.getItem('memberId')
        if (!id) {
            this.$router.push({
                path: '/'
            })
            return
        }
        const store = this.$store
        store.dispatch('getSelfData')
        this.$data.loading = false
    },
    template: `
        <div class="selfPage" v-loading="loading">
            <template v-if="showPage==0">
                <div class="selfPage-my">
                    <div class="selfPage-my-info">
                        <img :src="'http://app-tui.ngzb.com.cn'+state.selfData.member.avatar"/>
                        <h3>{{state.selfData.member.real_name}}</h3>
                        <p>ID:<span>{{state.selfData.member.username}}</span></p>
                    </div>
                </div>
                <ul class="selfPage-item">
                    <li id='1' @click="showPageEvent(1)">
                        <div style="background-image:url(./tuiguangma/assets/imgs/selficon1.png)"></div>
                        <h5>提现记录</h5>
                    </li>
                    <li id='2' @click="showPageEvent(2)">
                        <div style="background-image:url(./tuiguangma/assets/imgs/selficon2.png)"></div>
                        <h5>我的银行卡</h5>
                    </li>
                    <li id='3' @click="showPageEvent(3)">
                        <div style="background-image:url(./tuiguangma/assets/imgs/selficon3.png)"></div>
                        <h5>我的设置</h5>
                    </li>
                    <li id='4' @click="showPageEvent(4)">
                        <div style="background-image:url(./tuiguangma/assets/imgs/selficon4.png)"></div>
                        <h5>在线客服</h5>
                    </li>
                    <li id='5' @click="showPageEvent(5)">
                        <div style="background-image:url(./tuiguangma/assets/imgs/selficon5.png)"></div>
                        <h5>系统消息</h5>
                    </li>
                </ul>
            </template>
            <template v-else-if="showPage==1">
                <div class="homePage-mingxi-header-l" @click="showPageEvent(0)"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <table class="homePage-tuiguang-content">
                    <tr v-for="item in incomeData.data">
                        <td>{{item.content ? item.content : '.....'}}</td>
                        <td>
                            <p>收入</p>
                            <p>{{item.money}}元</p>
                        </td>
                        <td>
                            <p>时间</p>
                            <p>{{item.create_time}}</p>
                        </td>
                    </tr>
                </table>
            </template>
            <template v-else-if="showPage==2">
                <div class="homePage-mingxi-header-l" @click="showPageEvent(0)"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <table class="selfPage2-bankinfo">
                    <tr>
                        <td>银行名称</td>
                        <td>{{state.selfData.member.bank}}</td>
                    </tr>
                    <tr>
                        <td>开户地址</td>
                        <td>{{state.selfData.member.bank_address}}</td>
                    </tr>
                    <tr>
                        <td>银行卡号</td>
                        <td>{{state.selfData.member.bank_no}}</td>
                    </tr>
                </table>
            </template>
            <template v-else-if="showPage==3">
                <div class="homePage-mingxi-header-l" @click="showPageEvent(0)"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <el-form :model="formLabelAlign" class="selfPage3-setting" label-width="20vw">
                    <el-form-item>
                        <el-upload action="http://app-tui.ngzb.com.cn/count/index/uploadImg" :before-upload="sendAvatar">
                            <img :src="mainhost + state.selfData.member.avatar" class="selfPage3-setting-avatar"/>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="formLabelAlign.sex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="formLabelAlign.phone" :value="state.selfData.member.phone">{{state.selfData.member.phone}}</el-input>
                    </el-form-item>
                    <el-form-item label="验证码">
                        <el-input v-model="formLabelAlign.checkcode"></el-input>
                        <el-button type="primary" @click="sendCheckCode" class="homePage-getmoney-codesend">发送验证码</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="submitUserinfo">修改信息</el-button>
                    </el-form-item>
                </el-form>
            </template>
            <template v-else-if="showPage==4">
                <div class="homePage-mingxi-header-l" @click="showPageEvent(0)"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
            </template>
            <template v-else-if="showPage==5">
                <div class="homePage-mingxi-header-l" @click="showPageEvent(0)"><span>回到首页</span><img src="./tuiguangma/assets/imgs/mxicon2.png" style="width:5vw;"/></div>
                <el-main style="clear:both" v-html="notifyData"></el-main>
            </template>
        </div>
    `,
    methods: {
        showPageEvent(id) {
            if (id == 1) {
                this.$store.dispatch('getIncomeData')
            }
            if(id == 5){
                this.$store.dispatch('getNotify')
            }
            this.$data.showPage = id
        },
        submitUserinfo() {
            const that = this
            let id = sessionStorage.getItem('memberId')
            let formData = this.$data.formLabelAlign
            let fd = new FormData('sex', )
            fd.append('memberId', id)
            formData.sex && fd.append('sex', formData.sex)
            formData.phone && fd.append('phone', formData.phone)   
            this.$data.avatar && fd.append('avatar',this.$data.avatar)
            $.ajax({
                url: mainhost + '/member/user/uploadInfo',
                dataType: 'json',
                type: 'post',
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {
                    MINT.Toast(data.msg)
                }
            })
            console.log(this.$data.formLabelAlign)
        },
        sendCheckCode() {
            const that = this
            let formData = this.$data.formLabelAlign
            new Promise((res, rej) => {
                let _fd = new FormData()
                _fd.append('member_id', sessionStorage.getItem('memberId'))
                _fd.append('type', 3)
                _fd.append('phone', formData.phone)
                $.ajax({
                    url: mainhost + '/member/user/mobileVerify',
                    data: _fd,
                    type: 'post',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        res(data)
                    },
                    error: function (err) {
                        rej(err)
                    }
                })
            }).then(data => {
                MINT.Toast(data.msg)
            }).catch(err => {
                MINT.Toast(err)
            })
        },
        sendAvatar(file) {
            const that = this
            that.$data.loading = true
            let fd = new FormData()
            fd.append('image', file)
            fd.append('memberId', sessionStorage.getItem('memberId'))
            $.ajax({
                url: mainhost + '/count/index/uploadImg',
                data: fd,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    that.$data.avatar = data.data.imageId
                    that.$data.loading = false
                    MINT.Toast('上传成功')
                },
                error: function (err) {
                    MINT.Toast(err)
                }
            })
            return false
        },
    }
}

//用户登录
const LoginPage = {
    data() {
        return {
            style: {
                headerStyle: {
                    color: '#999',
                    fontSize: '5vw',
                    height: '3em',
                    lineHeight: '3em',
                    borderBottom: '1px solid #ccc',
                    backgroundColor: '#eee'
                },
                marginStyle: {
                    marginBottom: '20px'
                },
                marginStyle2: {
                    marginTop: '30px'
                },
                buttonStyle: {
                    width: '50vw',
                    marginBottom: '1em'
                }
            },
            state: this.$store.state,
            loading: false,
            showPage: 1,
            zmphoto: null,
            fmphoto: null,
            levelSel: null,
            identify1: null,
            identify2: null,
            showUA: false,
            isReadUA: false,
            userput1:null,
            userput2:null,
            userput3:null,
            userput4:null,
            userput5:null,
            userput6:null,
            userput7:null,
        }
    },
    computed: {
        id() {
            return this.$store.state.id
        },
        //是否有完善详细用户信息
        type() {
            return this.$store.state.type
        },
        status() {
            return this.$store.state.status
        },
        levelOpt() {
            return this.$store.state.levelOpt
        },
        uaData() {
            return this.$store.state.uaData
        },
        reload() {
            return this.$store.state.reload
        }
    },
    watch: {
        reload(curr, aft) {
            this.$data.loading = false
            switch (this.$data.state.type) {
                case 0:
                    if (this.$data.state.status == 0) {
                        MINT.Toast('您还未获得授权！')
                    } else if (this.$data.state.status == 1) {
                        this.$router.push({
                            path: '/home'
                        })
                        MINT.Toast('登录成功！')
                    }
                    break
                case 1:
                    this.$data.showPage = 2
                    MINT.Toast('请完善您的信息')
                    break
                default:
                    MINT.Toast(this.$data.state.type.msg)
            }
        }
    },
    created() {
        //获取用户职务等级
        this.$store.dispatch('getLevel')
        //获取用户协议
        this.$store.dispatch('getUA')
    },
    template: `
        <el-container v-loading="loading">
            <el-header v-bind:style="style.headerStyle">
                欢迎登录南国早报APP<span class="redcolor">推广系统</span>
            </el-header>
            <template v-if="showPage==1">
                <el-main>
                    <el-input id="account" placeholder="请输入账户" v-bind:style="[style.marginStyle,style.marginStyle2]" type="text"></el-input>
                    <el-input id="password" placeholder="请输入密码" v-bind:style="[style.marginStyle]" type="password"></el-input>
                    <el-row type="flex" justify="center">
                        <el-button type="danger" v-bind:style="style.buttonStyle" @click="submitEvent">登&nbsp;&nbsp;录</el-button>
                    </el-row>
                </el-main>
            </template>
            <template v-else-if="showPage==2">
                <el-container v-loading="loading">
                    <el-main>
                        <el-cascader
                            :options="levelOpt"
                            v-model="levelSel">
                        </el-cascader>
                        <el-input id="userput1" v-model="userput1" placeholder="请输入你的实名" v-bind:style="[style.marginStyle,style.marginStyle2]" type="text"></el-input>
                        <el-input id="userput5" v-model="userput5" placeholder="请上传你的银行名称" v-bind:style="[style.marginStyle]" type="text"></el-input>
                        <el-input id="userput6" v-model="userput6" placeholder="请上传你的银行卡号" v-bind:style="[style.marginStyle]" type="number"></el-input>
                        <el-input id="userput7" v-model="userput7" placeholder="请上传你的开户行地址" v-bind:style="[style.marginStyle]" type="text"></el-input>
                        <el-input id="userput3" v-model="userput3" placeholder="请输入你的电话" v-bind:style="[style.marginStyle]" type="text"></el-input>
                        <el-button v-bind:style="[style.marginStyle]" @click="checkCode">点击获取验证码</el-button>
                        <el-input id="userput4" v-model="userput4" placeholder="请输入你的验证码" v-bind:style="[style.marginStyle]" type="text"></el-input>
                        <el-row type="flex" justify="center" v-bind:style="[style.marginStyle]">
                            <el-upload action="http://app-tui.ngzb.com.cn/count/index/uploadImg" :before-upload="beforePhotoUpload">
                                <el-button type="primary" v-bind:style="style.buttonStyle">上传身份证正面照</el-button>
                            </el-upload>
                        </el-row>
                        <el-row type="flex" justify="center" v-bind:style="[style.marginStyle]">
                            <el-upload action="http://app-tui.ngzb.com.cn/count/index/uploadImg" :before-upload="beforePhotoUpload2">
                                <el-button type="primary" v-bind:style="style.buttonStyle">上传身份证反面照</el-button>
                                <img :src="identify1" v-show="identify1">
                            </el-upload>
                        </el-row>
                        <el-row type="flex" justify="center" v-bind:style="[style.marginStyle]">
                            <el-button type="primary" v-bind:style="style.buttonStyle" @click="showUAEvent">用户协议</el-button>
                        </el-row>
                        <el-row type="flex" justify="center">
                            <el-button type="danger" v-bind:style="style.buttonStyle" @click="finishEvent">确&nbsp;&nbsp;认</el-button>
                        </el-row>
                    </el-main>   
                </el-container>
            </template>
            <template v-else-if="showPage==3">
                <el-container>
                    <el-main class="uawrap">
                        <div v-html="uaData.data.content"></div>
                        <el-row type="flex" justify="center">
                            <el-button type="danger" v-bind:style="style.buttonStyle" @click="hideUAEvent">我已阅读</el-button>
                        </el-row>
                    </el-main>
                </el-container>
            </template>
        </el-container>
    `,
    methods: {
        //显示用户协议
        showUAEvent() {
            this.$data.showPage = 3
        },
        //已阅读按钮
        hideUAEvent() {
            this.$data.isReadUA = true
            this.$data.showPage = 2
        },
        //点击登录
        submitEvent() {
            const store = this.$store
            store.dispatch('userLogin')
            this.$data.loading = true
        },
        //验证码
        checkCode() {
            const that = this
            new Promise((res, rej) => {
                let _fd = new FormData()
                _fd.append('member_id', sessionStorage.getItem('memberId'))
                _fd.append('type', 1)
                _fd.append('phone', $('#userput3').val())
                $.ajax({
                    url: mainhost + '/member/user/mobileVerify',
                    data: _fd,
                    type: 'post',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        res(data)
                    },
                    error: function (err){
                        rej(err)
                    }
                })
            }).then(data => {
                MINT.Toast(data.msg)
            }).catch(err=>{
                MINT.Toast(err)
            })
        },
        //提交信息
        finishEvent() {
            const that = this
            const store = this.$store
            //没有阅读用户协议不让提交
            if(!that.$data.isReadUA){
                MINT.Toast('请仔细阅读用户协议')
                return
            }
            let updata = {
                id: sessionStorage.getItem('memberId'),
                realName: $('#userput1').val(),
                level: this.$data.levelSel && this.$data.levelSel[1],
                phone: $('#userput3').val(),
                code: $('#userput4').val(),
                idcardPositiveImg: that.$data.zmphoto,
                idcardNegativeImg: that.$data.fmphoto,
                bank: $('#userput5').val(),
                bank_no: $('#userput6').val(),
                bank_address: $('#userput7').val(),
            }
            let fd = new FormData()
            for (key in updata) {
                fd.append(key, updata[key])
            }
            $.ajax({
                url: mainhost + '/member/user/upload',
                data: fd,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code == 0) {
                        that.$data.showPage = 1
                        MINT.Toast('上传成功！')
                    }
                    MINT.Toast(data.msg)
                },
                error: function(err){
                    MINT.Toast(err)
                }
            })
            return false
        },
        //身份证正面
        beforePhotoUpload(file) {
            const that = this
            that.$data.loading = true
            let fd = new FormData()
            fd.append('image', file)
            fd.append('memberId', sessionStorage.getItem('memberId'))
            $.ajax({
                url: mainhost + '/count/index/uploadImg',
                data: fd,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    that.$data.zmphoto = data.data.imageId
                    that.$data.loading = false
                    MINT.Toast('上传正面照片成功')
                },
                error: function (err) {
                    MINT.Toast(err)
                }
            })
            return false
        },
        //身份证反面
        beforePhotoUpload2(file) {
            const that = this
            that.$data.loading = true
            let fd = new FormData()
            fd.append('image', file)
            fd.append('memberId', sessionStorage.getItem('memberId'))
            $.ajax({
                url: mainhost + '/count/index/uploadImg',
                data: fd,
                type: 'post',
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    that.$data.fmphoto = data.data.imageId
                    that.$data.loading = false
                    MINT.Toast('上传反面照片成功')
                },
                error: function (err) {
                    MINT.Toast(err)
                }
            })
            return false
        }
    }
}




const View = {
    Header,
    BottomNav,
    HomePage,
    InfoPage,
    ResultPage,
    SelfPage,
    LoginPage
}
module.exports = View